<%-- 
    Document   : menu
    Created on : 08-12-2014, 15:46:51
    Author     : Rodrigo
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<c:set var="contextPath" value="${pageContext.servletContext.contextPath}"/>

<style type="text/css">
    .navbar {
        /*background-color: black !important;*/
        background-image: url('${contextPath}/img/background-menu2.jpg');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; 
        /*background-size: 100%;*/
        border-bottom: 2px solid darkgreen !important;
        border-radius: 0px !important;
    }
    /*    .navbar a[data-toggle="dropdown"] {
            color: white !important;
        }*/
</style>

<nav class="navbar navbar-default navbar-static-top navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand color-white" href="${contextPath}/app/Home.view"><i class="glyphicon glyphicon-globe"></i> Epraxis</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <c:forEach var="modulo" items="${listaModulo}">
                    <c:if test="${modulo.enumGrupoModulo == null}">
                        <li>
                            <a href="${modulo.url}">
                                ${modulo.nombre}
                            </a>
                        </li>
                    </c:if>
                </c:forEach>
                <c:forEach var="grupoModulo" items="${listaGrupoModulo}">
                    <c:if test="${usuarioSesion != null && grupoModulo.name() eq 'CURSOS'}">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">${grupoModulo.nombre} <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <c:forEach var="modulo" items="${listaModulo}">
                                    <c:if test="${modulo.enumGrupoModulo.name() eq grupoModulo.name()}">
                                        <c:if test="${modulo.url != null && not empty modulo.url}">
                                            <li>
                                                <c:choose>
                                                    <c:when test="${modulo.modal}">
                                                        <a href="#" onclick="abrirModalGenerico('${modulo.nombre}', '${contextPath}${modulo.url}')">
                                                        </c:when>
                                                        <c:otherwise>
                                                            <a href="${modulo.url}">
                                                            </c:otherwise>
                                                        </c:choose>
                                                        <c:if test="${modulo.iconText != null}">
                                                            <i class="${modulo.iconText} color-${modulo.iconColor}"></i>
                                                        </c:if>
                                                        ${modulo.nombre}
                                                    </a>
                                            </li>
                                        </c:if>
                                    </c:if>
                                </c:forEach>
                            </ul>
                        </li>
                    </c:if>
                </c:forEach>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle color-white" data-toggle="dropdown" role="button" aria-expanded="false">
                        <i class="glyphicon glyphicon-user"></i> 
                        Hola, 
                        <c:choose>
                            <c:when test="${usuarioSesion != null}">
                                <b>${usuarioSesion.usuario} <small class="font-size-11">(Perfil ${usuarioSesion.getTipoUsuario().nombre})</small></b>
                            </c:when>
                            <c:otherwise>
                                Usuario invitado
                            </c:otherwise>
                        </c:choose>
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <c:choose>
                            <c:when test="${usuarioSesion != null}">
                                <!--<li><a href="#"><i class="glyphicon glyphicon-user color-steelblue"></i> Mis datos personales</a></li>-->
                                <!--<li><a href="#"><i class="fa fa-upload color-steelblue"></i> Mis cursos publicados</a></li>-->
                                <!--<li><a href="#"><i class="fa fa-pencil color-steelblue"></i> Mis cursos tomados</a></li>-->
                                <!--<li class="divider"></li>-->
                                <li><a href="#" onclick="cerrarSesion()" class="bg-danger"><i class="glyphicon glyphicon-remove-sign color-red"></i> Cerrar sesión</a></li>
                                </c:when>
                                <c:otherwise>
                                <li><a href="#" onclick="abrirModalIniciarSesion()"><i class="fa fa-key color-limegreen"></i> Iniciar sesión</a></li>
                                <li class="divider"></li> 
                                <li><a href="#"><i class="color-steelblue"></i> Registrarse</a></li>
                                </c:otherwise>
                            </c:choose>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>


<div class="modal fade" id="modalGenerico">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button>
                <h4 id="tituloModal" class="modal-title"></h4>
            </div>
            <div class="modal-body">
                <iframe id="iframeGenerico" src="" class="no-border max-width-100-percent"></iframe>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalIniciarSesion">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button>
                <h4 class="modal-title">Iniciar sesión</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12">
                        <span class="help-block">
                            Ingrese los datos que se le solicitan a continuación para iniciar sesión en <b>Epraxis</b>
                        </span>
                        <br>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <form id="formIniciarSesion" method="POST">
                            <strong class="font-size-14">Nombre de usuario:</strong>
                            <div class="input-group">
                                <span class="input-group-addon bg-white"><i class="glyphicon glyphicon-user color-steelblue"></i></span>
                                <input type="text" id="nombreUsuario" name="nombreUsuario" class="form-control"/>
                            </div>
                            <br>

                            <strong class="font-size-14">Contraseña:</strong>
                            <div class="input-group">
                                <span class="input-group-addon bg-white"><i class="glyphicon glyphicon-lock color-steelblue"></i></span>
                                <input type="password" name="clave" class="form-control"/>
                            </div>
                            <br>

                            <button type="button" onclick="iniciarSesion()" class="btn btn-primary pull-right">Iniciar sesión <i class="fa fa-arrow-right"></i></button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="${contextPath}/js/jquery-2.1.1.js">
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#modalGenerico').on('hidden.bs.modal', function(e) {
            $('#iframeGenerico').attr('src', '');
        });

        $('#modalIniciarSesion').on('shown.bs.modal', function(e) {
            $('#nombreUsuario').focus();
        });

        autoResizeIframe();
    });

    function autoResizeIframe() {
        var $iframe = $('iframe').eq(0), ie = (function() {
            var ie;
            return (ie = /MSIE (\d+)/.exec(navigator.userAgent)) && ie[1] < 9 ? 5 : 0;
        })();
        $iframe.load(function() {
            $iframe.animate({height: $(window.frames[0].document.body).outerHeight(true) + ie}, 400);
        });
        $iframe.data('load', function() {
            $iframe.trigger('load');
        });
        ie && $(window).load($iframe.data('load'));

    }

    function genericAjaxRequest(controlador, parametros) {
        var url = controlador + parametros;
        var request = $.ajax(url)
                .done(function(response) {
                    lanzarMensaje(response);
                })
                .fail(function(xhr, textStatus, errorThrown) {
                    lanzarMensaje(xhr.responseText);
                })
                .always(function() {
                });
    }

    function lanzarMensaje(mensaje) {
        alert(mensaje);
    }

    function abrirModalGenerico(titulo, url) {
        $('#tituloModal').html(titulo);
        $('#iframeGenerico').attr('src', url);
        $('#modalGenerico').modal('show');
    }

    function abrirModalIniciarSesion() {
        $('#modalIniciarSesion').modal('show');
    }

    function iniciarSesion() {
        var controller = '${contextPath}/app/commons/IniciarSesion.do?';
        var parametros = $('#formIniciarSesion').serialize();
        var url = controller + parametros;
        var request = $.ajax(url)
                .done(function(response) {
                    document.location.reload();
                })
                .fail(function(xhr, textStatus, errorThrown) {
                    lanzarMensaje(xhr.responseText);
                });
    }
    function cerrarSesion() {
        if (confirm('¿Está seguro de que desea cerrar sesión?')) {
            var url = '${contextPath}/app/commons/CerrarSesion.do?';
            var request = $.ajax(url)
                    .done(function(response) {
                        document.location = '${contextPath}/login.jsp';
                    })
                    .fail(function(xhr, textStatus, errorThrown) {
                        lanzarMensaje(xhr.responseText);
                    });
        }
    }
</script>